<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- ===== CSS ===== -->
        <link rel="stylesheet" href="assets/css/styles.css">

        <!-- ===== BOX ICONS ===== -->
        <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>

        <title>Drag y drop card</title>
    </head>
    <body>
        <div class="drop">
            <div class="drop__container" id="drop-items">
                <div class="drop__card">
                    <div class="drop__data">
                        <img src="assets/img/img1.jpg" alt="" class="drop__img">
                        <div>
                            <h1 class="drop__name">Clay</h1>
                            <span class="drop__profession">Web developer</span>
                        </div>
                    </div>

                    <div>
                        <a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
                    </div>
                </div>

                <div class="drop__card">
                    <div class="drop__data">
                        <img src="assets/img/img2.jpg" alt="" class="drop__img">
                        <div>
                            <h1 class="drop__name">Sara Mill</h1>
                            <span class="drop__profession">Graphic design</span>
                        </div>
                    </div>

                    <div>
                        <a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
                    </div>
                </div>

                <div class="drop__card">
                    <div class="drop__data">
                        <img src="assets/img/img3.jpg" alt="" class="drop__img">
                        <div>
                            <h1 class="drop__name">Robbie Ford</h1>
                            <span class="drop__profession">Ui/Ux design</span>
                        </div>
                    </div>

                    <div>
                        <a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
                    </div>
                </div>

                <div class="drop__card">
                    <div class="drop__data">
                        <img src="assets/img/img4.jpg" alt="" class="drop__img">
                        <div>
                            <h1 class="drop__name">Jenny Lit</h1>
                            <span class="drop__profession">Digital marketing</span>
                        </div>
                    </div>

                    <div>
                        <a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
                        <a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
                    </div>
                </div>
            </div>
        </div>


        <!--===== SORTABLE JS =====-->
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

         <!--===== MAIN JS =====-->
         <script src="assets/js/main.js"></script>
    </body>
</html>